<template>
  <ContentWrap>
   <el-form
     class="-mb-15px"
     :model="queryParams"
     ref="queryFormRef"
     :inline="true"
     label-width="68px"
   >
     <el-row>
       <el-form-item label="抓取时间" prop="grabTime">
         <el-date-picker
           v-model="queryParams.grabTime"
           :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
           class="!w-240px"
           end-placeholder="结束日期"
           start-placeholder="开始日期"
           type="daterange"
           value-format="YYYY-MM-DD HH:mm:ss"
         />
       </el-form-item>
     </el-row>
     <el-row>
       <el-form-item label="爬升热度" prop="grabTime">
         <el-date-picker
           v-model="queryParams.grabTime"
           :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
           class="!w-240px"
           end-placeholder="结束日期"
           start-placeholder="开始日期"
           type="daterange"
           value-format="YYYY-MM-DD HH:mm:ss"
         />
       </el-form-item>

       <el-form-item label="" prop="status">
         <el-select v-model="queryParams.status" class="!w-180px" clearable placeholder="请选择">
           <el-option
             v-for="dict in []"
             :key="dict.value"
             :label="dict.label"
             :value="dict.value"
           />
         </el-select>
       </el-form-item>
     </el-row>

     <el-row>
       <el-form-item label="行业" prop="status">
         <el-select v-model="queryParams.status" class="!w-180px" clearable placeholder="请选择">
           <el-option
             v-for="dict in []"
             :key="dict.value"
             :label="dict.label"
             :value="dict.value"
           />
         </el-select>
       </el-form-item>
       <el-form-item label="二级行业" prop="status">
         <el-select v-model="queryParams.status" class="!w-180px" clearable placeholder="请选择">
           <el-option
             v-for="dict in []"
             :key="dict.value"
             :label="dict.label"
             :value="dict.value"
           />
         </el-select>
       </el-form-item>
     </el-row>

     <el-row>
       <el-form-item label="标签" prop="code">
         <el-input
           v-model="queryParams.code"
           class="!w-180px"
           clearable
           placeholder="请输入角色标识"
           @keyup.enter="handleQuery"
         />
       </el-form-item>
       <el-form-item label="平台" prop="status">
         <el-select v-model="queryParams.status" class="!w-180px" clearable placeholder="请选择">
           <el-option
             v-for="dict in []"
             :key="dict.value"
             :label="dict.label"
             :value="dict.value"
           />
         </el-select>
       </el-form-item>
       <el-form-item label="集团名称" prop="status">
         <el-input
           v-model="queryParams.code"
           class="!w-180px"
           clearable
           placeholder="请输入"
           @keyup.enter="handleQuery"
         />
       </el-form-item>
       <el-form-item label="名称" prop="status">
         <el-input
           v-model="queryParams.code"
           class="!w-180px"
           clearable
           placeholder="请输入"
           @keyup.enter="handleQuery"
         />
       </el-form-item>
       <el-form-item label="核验状态" prop="status">
         <el-select v-model="queryParams.status" class="!w-180px" clearable placeholder="请选择">
           <el-option
             v-for="dict in []"
             :key="dict.value"
             :label="dict.label"
             :value="dict.value"
           />
         </el-select>
       </el-form-item>
       <el-form-item label="链接id" prop="status">
         <el-input
           v-model="queryParams.code"
           class="!w-180px"
           clearable
           placeholder="请输入"
           @keyup.enter="handleQuery"
         />
       </el-form-item>
       <el-form-item label="用户" prop="status">
         <el-input
           v-model="queryParams.code"
           class="!w-180px"
           clearable
           placeholder="请输入"
           @keyup.enter="handleQuery"
         />
       </el-form-item>
       <el-form-item label="视频状态" prop="status">
         <el-select v-model="queryParams.status" class="!w-180px" clearable placeholder="请选择">
           <el-option
             v-for="dict in []"
             :key="dict.value"
             :label="dict.label"
             :value="dict.value"
           />
         </el-select>
       </el-form-item>
     </el-row>
     <el-row>
       <el-form-item>
         <el-button type="primary" @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
         <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
         <el-button
           type="primary"
           @click="openForm('create')"
           >
         <Icon icon="ep:plus" class="mr-5px" /> 新增
       </el-button>
       <el-button type="primary" @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 导出</el-button>
       </el-form-item>
     </el-row>
   </el-form>

   <el-table
     v-loading="loading"
     :data="list"
     row-key="id"
     v-if="refreshTable"
     border
     @sortChange="grabTimeSort"
   >
     <el-table-column align="center" prop="video" label="视频">
      <template #default="scope">
         <video :src="scope.row.video" class="list-image" alt=""></video>
      </template>
     </el-table-column>
     <el-table-column align="center" prop="desc" label="描述">
      <!--  <template #default="scope">
         {{ userList.find((user) => user.id === scope.row.leaderUserId)?.nickname }}
       </template> -->
     </el-table-column>
     <el-table-column align="center" prop="user" label="用户" />
     <el-table-column align="center" prop="type" label="广告类型">
       <template #default="scope">
        {{ typeEmun[scope.row.type] }}
       </template>
     </el-table-column>
     <el-table-column align="center" prop="page" label="落地页" />
     <el-table-column align="center" prop="tag" label="标签" />
     <el-table-column align="center" prop="payImage" label="付费截图">
      <template #default="scope">
        <el-image
          preview-teleported
          hide-on-click-modal
          :src="scope.row.payImage"
          :preview-src-list="[scope.row.payImage]"
          class="list-image"
          alt="" 
        />
      </template>
     </el-table-column>
     <el-table-column align="center" prop="truthName" label="真实剧名" />
     <el-table-column align="center" prop="accuracyRate" label="剧名准确率" />
     <el-table-column align="center" prop="groupName" label="集团名称">
      <template #default="scope">
        {{ scope.row.groupName }}
        <Icon icon="ep:edit-pen" @click="editGroup(edit, scope.row.id)" />
      </template>
     </el-table-column>
     <el-table-column align="center" prop="name" label="名称">
      <template #default="scope">
        {{ scope.row.name }}
        <Icon icon="ep:edit-pen" />
      </template>
     </el-table-column>
     <el-table-column align="center" prop="realId" label="realId" />
     <el-table-column align="center" prop="verifyStatus" label="核验状态">
      <template #default="scope">
        {{ verifyStatusEmun[scope.row.verifyStatus] }}
       </template>
     </el-table-column>
     <el-table-column align="center" prop="industry" label="行业" />
     <el-table-column align="center" prop="secondIndustru" label="二级行业" />
     <el-table-column align="center" label="操作 ">
      <template #default="scope">
        <el-button link type="primary" @click="toDetail(scope.row.id)">每日详情</el-button>
      </template>
     </el-table-column>
     <el-table-column align="center" sortable prop="likeNum" label="点赞数量" />
     <el-table-column align="center" sortable prop="collectNum" label="收藏数量" />
     <el-table-column align="center" sortable prop="shareNum" label="分享数量" />
     <el-table-column
       prop="releaseTime"
       label="发布时间"
       align="center"
       width="180"
       :formatter="dateFormatter"
       sortable
     />
     <el-table-column
       prop="grabTime"
       label="抓取时间"
       align="center"
       width="180"
       :formatter="dateFormatter"
       sortable="custom"
     />
   </el-table>
  </ContentWrap>

  <GroupForm ref="groupFormRef" @success="()=>{}" />
</template>

<script lang="ts" setup>
import { dateFormatter } from '@/utils/formatTime'
import * as MateriaApi from '@/api/system/materia'
import { DICT_TYPE } from '@/utils/dict'
import GroupForm from './groupForm.vue'
import { buildSortingField } from '@/utils'

import { useIcon } from '@/hooks/web/useIcon'
const icon = useIcon({ icon: 'svg-icon:EditPen' })

const loading = ref(false) // 列表的加载中
const list = ref([
 {
   id:123,
   video:'https://v3-default.ixigua.com/3f4e5acfcb00ba22816aef9cbbab9f08/667f70e3/video/tos/cn/tos-cn-ve-15/oQEeAJYeHXjMFDQgQZQMOF8MIa4XAte8CM8ne2/?a=2011&ch=0&cr=0&dr=0&net=5&cd=0%7C0%7C0%7C0&cv=1&br=2538&bt=2538&cs=0&ds=3&ft=4zenzjjM9Xpxesq4ZmCThSVKlcL4xYQ2bLPQGQpuZmkaY3&mime_type=video_mp4&qs=0&rc=aTs3N2g0OTtmOzQ1ZTs8Z0BpM2Z4ZXM5cmY7czMzNGkzM0AuMzRiXmA2NV4xNDY0MTA1YSMwcnBsMmRzX3JgLS1kLTBzcw%3D%3D&btag=80000e00010000&dy_q=1719624384&feature_id=59cb2766d89ae6284516c6a254e9fb61&l=2024062909262418FB1BE88BC65C0FDD02',
   desc: '描述',
   user: '用户',
   type: 1,
   page: 'www.baidu.com',
   tag: ['sdf','ffd'],
   payImage: 'https://img.mp.itc.cn/upload/20170501/1a78257db19d43c089222c0d6630212d_th.jpeg',
   truthName: '剧名66',
   accuracyRate: '754711',
   groupName: '大力集团',
   name: '名称',
   realId: 54675746,
   verifyStatus: 2,
   industry: 'dfgdsf',
   secondIndustru: 'string',
   likeNum: 456,
   collectNum: 23,
   shareNum: 234,
   releaseTime: new Date(),
   grabTime: new Date(),
 }
]) // 列表的数据
const queryParams = reactive({
 pageNo: 1,
 pageSize: 100,
 name: undefined,
 status: undefined
})

const typeEmun = {
  1: '抖音',
  2: '快手'
}

const verifyStatusEmun = {
  1: '已核验',
  2: '未核验'
}
const queryFormRef = ref() // 搜索的表单
const refreshTable = ref(true) // 重新渲染表格状态

const exRinkingList = ref<MateriaApi.MaterialVO[]>([{}]) // 用户列表

/** 搜索按钮操作 */
const handleQuery = () => {
 
}

/** 重置按钮操作 */
const resetQuery = () => {
 queryParams.pageNo = 1
 queryFormRef.value.resetFields()
 handleQuery()
}

// 修改集团名称
const groupFormRef = ref()
const editGroup = (type: string, id?: number) => {
  groupFormRef.value.open(type, id)
}

const grabTimeSort = (data: {column: any, prop: string, order: any }) => {
  console.log([buildSortingField(params)])
}
</script>

<style lang="scss" scoped>
.list-image{
  width: 100px;

}

</style>